<template>
    <div id="vcu-avatar" :style="{bottom: order * 80 + 'px'}">
        <div id="avatar2">
            <el-avatar  icon="el-icon-user-solid" 
                slot="reference" :size="40" :fit="fill"
                :src='src'>
            </el-avatar>
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'vcu-avatar',
    props: ['order', 'src']
    
}
</script>
<style scoped>
#vcu-avatar{
    width: 80px;
    height: 80px;
    /* background-color: rgb(79, 79, 187); */
    position: fixed;
    bottom: 0px;
}
#avatar2{
    margin: 20px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
#avatar2:hover{
    cursor: pointer;
    box-shadow: rgb(119, 118, 118) 0px 0px 20px ;
    opacity: 0.5;
}
</style>